<html>
    <head>
        <meta charset="UTF-8">
        <title>操作样式</title>
        <script src="./js/jquery-3.6.0.min.js" type="text/javascript"></script>
        <style type="text/css">
        .baseClass{background-color: #ddd;}
        .focusClass{background-color: #fff;border: 2px dotted #f00;}
        .inverseColor{color: #fff;background-color: #000;}
        </style>
    </head>
    <body>
        <img src="./images/1.jpg"/><hr />
        <input type="button" value="放大图片" onclick="enlargeImage()"/>
        <input type="button" value="缩小图片" onclick="lessenImage()"/>
        <script type="text/javascript">
        function enlargeImage(){
            $("img").css({
                width: function(index, value) {
                    return parseFloat(value) * 1.1;
                },
                height: function(index, value) {
                    return parseFloat(value) * 1.1;
                }
             });
        }
        function lessenImage(){
            $("img").css({
                width: function(index, value) {
                    return parseFloat(value) * 0.9;
                },
                height: function(index, value) {
                    return parseFloat(value) * 0.9;
                }
             });
        }
        </script>
    </body>
</html>